﻿/**
TODO: SessionID or RoomID
Pass the session id to server..
**/ 

define([
    "jQuery",
	"jQuery-ui",
    "drag",
	"app/views/draw", 
	"app/app-util", 
	"rightClick", 
	"finger",
	"colorPicker",
	"dragableTouch",
	"colorPicker",
	"html2Canvas",
	"canvas2Image",
	"chatbox",
	"base64Img",
	"gridBuilder",
	"printArea",
	"touchPan" 
	], function (
    $,
	$ui,
    drag,
	drawerView, 
	util, 
	rightClick, 
	finger,
	colorPicker,
	dragableTouch,
	colorPicker,
	html2Canvas,
	canvas2Image,
	chatbox,
	base64Img,
	gridBuilder,
	printArea,
	touchPan 
	) {
	
    return {
		lastClickPointTools:{x:0,y:0},
		lastClickPoint:{x:0,y:0},
		lastClickGlobalPoint:{x:0,y:0},
		positionChange:{left:0,top:0},
		sizeChange:{width:0,height:0},
		editProp : {x :0,y:0,width:0,height:0,bgCanvas:""},
		positionAlign:{left:0,top:0},
		fileId: "fileId", 
		Util : util, 
		draw: drawerView,
		rootCanvas : 'rootContainer', 
		dragMode: true,
		activeObject : false,
		isDrag:false,
		lastUpdateTime:0,
		prepareCreation:false,
		creationMode:false,
		creationKind: false, 
		creationType:'pencil',
		creationStartPoint: {x:0,y:0},
		creationObject: null,
		pollInterval: 25000000,
		openedTool: false,
		option : false,
		optionTemplate : false,
		heightChartDraw : 0,
		widthChartDraw : 0,
		listFileLayersCount : 0,
		tempPageId : false, 
		openWindowPreview : 1,
		chatbox:chatbox,
		initialWidth : 0,
		chatboxContainer:null,
		isUpdate : 0,
		lastZ : 20,
		idIndicatorLast : 0,
		idPageSelcLast : 0,
		isModeArea : 0,
		justSelectAnObject : false,
		pageCount : 0,
		filename : "",
		isRecover : false,
		pages : new Array(),
		lockDataObject:0,
		statusLock:0,
		currIdData:0,
		lockObjectImg:0,
		arrayLockObj:{},
		listObject:[],
		withoutPass:0,
		passVal:null,
		objlck: 0,
		widthMinTable : 0,
		heightMinTable : 0,
		optionImage : false,
		paramUrl:{},
		pageName:"",
		baseUrl:document.getElementById("base_url").value,
		fileId:document.getElementById("file_id").value,
		pageId:document.getElementById("page_id").value,
		username:document.getElementById("u_name").value,
		userId:document.getElementById("u_id").value,
		nodeURL:document.getElementById("node_url").value,
		
		pan : function(){
			
		},

        init: function () {
			
			String.locale="jp";
			// $(document.body).css('-moz-transform', 'scale(2.8)');
			initialWidth = $(window).width(); 
			 
			var searchString = window.location.search.substring(1)
				, params = searchString.split("&")
				, hash = {}
				;
				
			for (var i = 0; i < params.length; i++) {
				var val = params[i].split("=");
				hash[unescape(val[0])] = unescape(val[1]);
			} 
			App.paramUrl = hash;
			App.pageId = App.paramUrl.page_id;
			  
			$('#rootContainer').on('click',function(event){
				var zoom = initialWidth/$(window).width();
				 
				App.lastClickPointTools.x = event.pageX;
				App.lastClickPointTools.y = event.pageY;
				var offset = $(this).offset();
				var posX = (event.pageX - offset.left)/zoom ,posY = (event.pageY - offset.top)/zoom;
				App.lastClickGlobalPoint.x = event.pageX/zoom;
				App.lastClickGlobalPoint.y = event.pageY/zoom;
				App.lastClickPoint.x = (event.pageX - offset.left)/zoom;// - event.target.offsetLeft;
				App.lastClickPoint.y = (event.pageY - offset.top)/zoom;// - event.target.offsetLeft;
				 
			});
			 
			$('#rootContainer').css('background-image', 'url(' + App.baseUrl+'documents/'+App.fileId+'/background-'+ App.pageId +'.png )');
			$('#rootContainer').css('background-size', '100%'); 
            
			// window.onresize = App.onresize();
			// jQuery(document).zoom(function(){
				// alert('I zoomed');
			// });	
		}, 
		
		// not yet use
		onresize: function() {
			var r = DetectZoom.ratios();
			alert(r.zoom);
			zoomLevel.innerHTML =
			"Zoom level: " + r.zoom +
			(r.zoom !== r.devicePxPerCssPx
				? "; device to CSS pixel ratio: " + r.devicePxPerCssPx
				: "");
		},
		
		//This is for set scale
		setScale: function(valScal){
			return "scale("+valScal+")";
		},
		
		//This is to set scale to root
		setScaleToRoot: function(valScal){
			$('#rootContainer').css("transform", valScal);					//Mozilla
			$('#rootContainer').css("-webkit-transform", valScal);			/* Saf3.1+, Chrome */
			$('#rootContainer').css("-moz-transform", valScal);				/* FF3.5+ */
			$('#rootContainer').css("-ms-transform", valScal);				/* IE9 */
			$('#rootContainer').css("-o-transform", valScal);					/* Opera 10.5+ */				
			$('#rootContainer').css("transform-origin", "0% 0%");
			$('#rootContainer').css("-webkit-transform-origin", "0% 0%");
			$('#rootContainer').css("-moz-transform-origin", "0% 0%");
			$('#rootContainer').css("-ms-transform-origin", "0% 0%");
			$('#rootContainer').css("-o-transform-origin", "0% 0%");
		},
		
		// Initial width and height for area preview canvas 
		setInitSizeArea: function(width, height){
			$('#areaPreview').css("width" , width);
			$('#areaPreview').css("height" , height);
		},
		
		screenZoomTo:function(stateZome){
			// var screen = document.frames.screen; 
			var currSize = screen.deviceXDPI / screen.systemXDPI; 
			if(currSize != stateZome){  
				 var e = jQuery.Event("keydown");
				e.keyCode = 17; // CTRL key pressed 
				$("input").trigger(e, function(){
					var e = jQuery.Event("keydown");
					e.which = 189; // - key
					$("input").trigger(e);
				});
				 
				var screen2 = document.frames.screen; 
				var currSize2 = screen2.deviceXDPI / screen2.systemXDPI; 
						 
			} 
		},
		
		setInitObjectPreview: function(width, height){
			/*
				Scale Root Container to load into the Area Preview.
				The Root Container is child from Area Preview.
			*/ 
			var nameBrowDev = App.setBrowserDetect(); 
			var scale = "";
			if(parseInt($('#rootContainer').width()) > 1440 && parseInt($('#rootContainer').width()) < 1460){
				
				// scale = "scale(0.13)";
				if(nameBrowDev == "mobile"){
					scale = App.setScale(0.65);
					App.setInitSizeArea(950, 400);
				}else if($.browser.mozilla){
					scale = App.setScale(0.93);
					App.setInitSizeArea(1300, 700);
				}else if($.browser.chrome){
					scale = App.setScale(0.9);
					App.setInitSizeArea(1300, 700);
				}else if($.browser.msie){
					
					// var screen = document.frames.screen;
					// alert(screen.deviceXDPI / screen.systemXDPI);
					App.screenZoomTo(0.75);
					switch(screen.deviceXDPI / screen.systemXDPI){
						case 4:
							var scaleMult = ( (((screen.deviceXDPI / screen.systemXDPI) - 3.85) * 100 *10 + 70).toFixed() ); //400%
							scale = App.setScale((screen.deviceXDPI / screen.systemXDPI) - 3.85); //400
							App.setInitSizeArea(scaleMult, 40);// 400
						break;
						case 2:
							var scaleMult = ( (((screen.deviceXDPI / screen.systemXDPI) - 1.65) * 100 *10 + 150).toFixed() ); //200%
							scale = App.setScale((screen.deviceXDPI / screen.systemXDPI) - 1.65); //200
							App.setInitSizeArea(scaleMult, 200);// 200
						break;
						case 1.5:
							var scaleMult = ( (((screen.deviceXDPI / screen.systemXDPI) - 1) * 100 *10 + 220).toFixed() ); //150%
							scale = App.setScale((screen.deviceXDPI / screen.systemXDPI) - 1); //150
							App.setInitSizeArea(scaleMult, 200);// 150
						break;
						case 1.25:
							var scaleMult = ( (((screen.deviceXDPI / screen.systemXDPI) - 0.65) * 100 *10 + 280).toFixed() ); //125%
							scale = App.setScale((screen.deviceXDPI / screen.systemXDPI) - 0.65); // 125
							App.setInitSizeArea(scaleMult, 400);// 125
						break;
						case 1:
							var scaleMult = ( (((screen.deviceXDPI / screen.systemXDPI) - 0.25) * 100 *10 + 350).toFixed() ); //100%
							scale = App.setScale((screen.deviceXDPI / screen.systemXDPI) - 0.25); //100
							App.setInitSizeArea(scaleMult, 400);// 100
						break; 
						case 0.75:
							var scaleMult = ( (((screen.deviceXDPI / screen.systemXDPI) ) * 100 *10 + 350).toFixed() ); //75%
							scale = App.setScale((screen.deviceXDPI / screen.systemXDPI) ); //75
							App.setInitSizeArea(scaleMult, 600);// 75
						break;
						case 0.5:
							var scaleMult = ( (((screen.deviceXDPI / screen.systemXDPI) + 0.25) * 100 *10 + 400).toFixed() ); //50%
							scale = App.setScale((screen.deviceXDPI / screen.systemXDPI) + 0.25); //50
							App.setInitSizeArea(scaleMult, 800);// 150
						break;
					}    
					// App.setInitSizeArea(1600, 600*100/scaleMult);
				}else if($.browser.safari){
					scale = App.setScale(0.7);
					App.setInitSizeArea(1050, 500);
				}
				else{
					scale = "scale(0.13)";
				}
				App.pageName = "A1";
			}else if(parseInt($('#rootContainer').width()) > 1190 && parseInt($('#rootContainer').width()) < 1210){ 
				// scale = "scale(0.2)";
				if(nameBrowDev == "mobile"){
					scale = App.setScale(0.75);
					App.setInitSizeArea(900, 500);
				}else if($.browser.mozilla){
					scale = App.setScale(1.12);
					App.setInitSizeArea(1300, 700);
				}else if($.browser.chrome){
					scale = App.setScale(1.1);
					App.setInitSizeArea(1300, 700);
				}else if($.browser.msie){
					switch(screen.deviceXDPI / screen.systemXDPI){
						case 4:
							var scaleMult = ( (((screen.deviceXDPI / screen.systemXDPI) - 3.75) * 100 *10 + 50).toFixed() ); //400%
							scale = App.setScale((screen.deviceXDPI / screen.systemXDPI) - 3.75); //400
							App.setInitSizeArea(scaleMult, 40);// 400
						break;
						case 2:
							var scaleMult = ( (((screen.deviceXDPI / screen.systemXDPI) - 1.5) * 100 *10 + 100).toFixed() ); //200%
							scale = App.setScale((screen.deviceXDPI / screen.systemXDPI) - 1.5); //200
							App.setInitSizeArea(scaleMult, 200);// 200
						break;
						case 1.5:
							var scaleMult = ( (((screen.deviceXDPI / screen.systemXDPI) - 1) * 100 *10 + 120).toFixed() ); //150%
							scale = App.setScale((screen.deviceXDPI / screen.systemXDPI) - 1); //150
							App.setInitSizeArea(scaleMult, 200);// 150
						break;
						case 1.25:
							var scaleMult = ( (((screen.deviceXDPI / screen.systemXDPI) - 0.6) * 100 *10 + 150).toFixed() ); //125%
							scale = App.setScale((screen.deviceXDPI / screen.systemXDPI) - 0.6); // 125
							App.setInitSizeArea(scaleMult, 400);// 125
						break;
						case 1:
							var scaleMult = ( (((screen.deviceXDPI / screen.systemXDPI) - 0.15) * 100 *10 + 150).toFixed() ); //100%
							scale = App.setScale((screen.deviceXDPI / screen.systemXDPI) - 0.15); //100
							App.setInitSizeArea(scaleMult, 400);// 100
						break;
						case 0.75:
							scale = App.setScale(0.8);
							App.setInitSizeArea(1000, 700);
						break;
						case 0.5:
							scale = App.setScale(1);
							App.setInitSizeArea(1200, 700);
						break; 
						// default:
							// scale = App.setScale(1.2);
							// App.setInitSizeArea(1400, 700);
						// break; 
					}  
					// scale = App.setScale(1.2);
					// App.setInitSizeArea(1400, 700);
				}else if($.browser.safari){
					scale = App.setScale(0.9);
					App.setInitSizeArea(1100, 500);
				}else if(nameBrowDev == "mobile"){
					scale = App.setScale(0.7);
					App.setInitSizeArea(1050, 500);
				}else{
					scale = "scale(0.13)";
				}
				App.pageName = "A2";
			}else if(parseInt($('#rootContainer').width()) > 1090 && parseInt($('#rootContainer').width()) < 1110){ 
				// scale = "scale(0.2)";
				if(nameBrowDev == "mobile"){
					scale = App.setScale(0.85);
					App.setInitSizeArea(930, 400);
				}else if($.browser.mozilla){
					scale = App.setScale(1.12);
					App.setInitSizeArea(1300, 700);
				}else if($.browser.chrome){
					scale = App.setScale(1.2);
					App.setInitSizeArea(1300, 700);
				}else if($.browser.msie){
					switch(screen.deviceXDPI / screen.systemXDPI){	
						case 4:
							var scaleMult = ( (((screen.deviceXDPI / screen.systemXDPI) - 3.71) * 100 *10 + 68).toFixed() ); //400%
							scale = App.setScale((screen.deviceXDPI / screen.systemXDPI) - 3.71); //400
							App.setInitSizeArea(scaleMult, 40);// 400
						break;
						case 2:
							var scaleMult = ( (((screen.deviceXDPI / screen.systemXDPI) - 1.5) * 100 *10 + 30).toFixed() ); //200%
							scale = App.setScale((screen.deviceXDPI / screen.systemXDPI) - 1.5); //200
							App.setInitSizeArea(scaleMult, 200);// 200
						break;
						case 1.5:
							var scaleMult = ( (((screen.deviceXDPI / screen.systemXDPI) - 0.8) * 100 *10 + 80).toFixed() ); //150%
							scale = App.setScale((screen.deviceXDPI / screen.systemXDPI) - 0.8); //150
							App.setInitSizeArea(scaleMult, 200);// 150
						break;
						case 1.25:
							var scaleMult = ( (((screen.deviceXDPI / screen.systemXDPI) - 0.55) * 100 *10 + 50).toFixed() ); //125%
							scale = App.setScale((screen.deviceXDPI / screen.systemXDPI) - 0.55); // 125
							App.setInitSizeArea(scaleMult, 400);// 125
						break;
						case 1:
							var scaleMult = ( (((screen.deviceXDPI / screen.systemXDPI) - 0.1) * 100 *10 + 50).toFixed() ); //100%
							scale = App.setScale((screen.deviceXDPI / screen.systemXDPI) - 0.1); //100
							App.setInitSizeArea(scaleMult, 400);// 100
						break;
						case 0.75:
							scale = App.setScale(1);
							App.setInitSizeArea(1000, 700);
						break;
						case 0.5:
							scale = App.setScale(1.3);
							App.setInitSizeArea(1400, 700);
						break; 
					}  
					// scale = App.setScale(1.3);
					// App.setInitSizeArea(1400, 700);
				}else if($.browser.safari){
					scale = App.setScale(0.9);
					App.setInitSizeArea(1000, 500);
				}else if(nameBrowDev == "mobile"){
					scale = App.setScale(0.7);
					App.setInitSizeArea(1050, 500);
				}else{
					scale = "scale(0.13)";
				}
				App.pageName = "A3";
			}else if(parseInt($('#rootContainer').width()) > 990 && parseInt($('#rootContainer').width()) < 1010){ 
				// scale = "scale(0.25)";
				if(nameBrowDev == "mobile"){
					scale = App.setScale(0.9);
					App.setInitSizeArea(900, 400);
				}else if($.browser.mozilla){
					scale = App.setScale(1.32);
					App.setInitSizeArea(1400, 700);
				}else if($.browser.chrome){
					scale = App.setScale(1.4);
					App.setInitSizeArea(1400, 700);
				}else if($.browser.msie){
					switch(screen.deviceXDPI / screen.systemXDPI){
						case 4:
							var scaleMult = ( (((screen.deviceXDPI / screen.systemXDPI) - 3.71) * 100 *10 + 68).toFixed() ); //400%
							scale = App.setScale((screen.deviceXDPI / screen.systemXDPI) - 3.71); //400
							App.setInitSizeArea(scaleMult, 40);// 400
						break;
						case 2:
							var scaleMult = ( (((screen.deviceXDPI / screen.systemXDPI) - 1.36) * 100 *10 + 0).toFixed() ); //200%
							scale = App.setScale((screen.deviceXDPI / screen.systemXDPI) - 1.36); //200
							App.setInitSizeArea(scaleMult, 200);// 200
						break;
						case 1.5:
							var scaleMult = ( (((screen.deviceXDPI / screen.systemXDPI) - 0.65) * 100 *10 + 0).toFixed() ); //150%
							scale = App.setScale((screen.deviceXDPI / screen.systemXDPI) - 0.65); //150
							App.setInitSizeArea(scaleMult, 200);// 150
						break;
						case 1.25:
							var scaleMult = ( (((screen.deviceXDPI / screen.systemXDPI) - 0.3) * 100 *10 + 20).toFixed() ); //125%
							scale = App.setScale((screen.deviceXDPI / screen.systemXDPI) - 0.3	); // 125
							App.setInitSizeArea(scaleMult, 400);// 125
						break;
						case 1:
							var scaleMult = ( (((screen.deviceXDPI / screen.systemXDPI) + 0.03) * 100 *10 + 50).toFixed() ); //100%
							scale = App.setScale((screen.deviceXDPI / screen.systemXDPI) +0.03); //100
							App.setInitSizeArea(scaleMult, 400);// 100
						break;
						case 0.75:
							scale = App.setScale(1);
							App.setInitSizeArea(1000, 700);
						break;
						case 0.5:
							scale = App.setScale(1.1);
							App.setInitSizeArea(1100, 700);
						break; 
						// default:
							// scale = App.setScale(1.5);
							// App.setInitSizeArea(1500, 700);
						// break; 
					}  
					// scale = App.setScale(1.5);
					// App.setInitSizeArea(1500, 700);
				}else if($.browser.safari){
					scale = App.setScale(1);
					App.setInitSizeArea(1000, 500);
				}else if(nameBrowDev == "mobile"){
					scale = App.setScale(0.7);
					App.setInitSizeArea(1050, 500);
				}else{
					scale = "scale(0.13)";
				}
				App.pageName = "A4";
			}else if(parseInt($('#rootContainer').width()) > 790 && parseInt($('#rootContainer').width()) < 810){ 
				// scale = "scale(0.48)"; 
				if(nameBrowDev == "mobile"){
					scale = App.setScale(1.1);
					App.setInitSizeArea(900, 400);
				}else if($.browser.mozilla){
					scale = App.setScale(1.72);
					App.setInitSizeArea(1500, 700);
				}else if($.browser.chrome){
					scale = App.setScale(1.7);
					App.setInitSizeArea(1350, 700);
				}else if($.browser.msie){
					switch(screen.deviceXDPI / screen.systemXDPI){
						case 4:
							var scaleMult = ( (((screen.deviceXDPI / screen.systemXDPI) - 3.6) * 100 *10 + 70).toFixed() ); //400%
							scale = App.setScale((screen.deviceXDPI / screen.systemXDPI) - 3.6); //400
							App.setInitSizeArea(scaleMult, 40);// 400
						break;
						case 2:
							var scaleMult = ( (((screen.deviceXDPI / screen.systemXDPI) - 1.5) * 100 *10 - 100).toFixed() ); //200%
							scale = App.setScale((screen.deviceXDPI / screen.systemXDPI) - 1.5); //200
							App.setInitSizeArea(scaleMult, 200);// 200
						break;
						case 1.5:
							var scaleMult = ( (((screen.deviceXDPI / screen.systemXDPI) - 0.8) * 100 *10 - 200).toFixed() ); //150%
							scale = App.setScale((screen.deviceXDPI / screen.systemXDPI) - 0.8); //150
							App.setInitSizeArea(scaleMult, 200);// 150
						break;
						case 1.25:
							var scaleMult = ( (((screen.deviceXDPI / screen.systemXDPI) - 0.43) * 100 *10 - 200).toFixed() ); //125%
							scale = App.setScale((screen.deviceXDPI / screen.systemXDPI) - 0.43	); // 125
							App.setInitSizeArea(scaleMult, 400);// 125
						break;
						case 1:
							var scaleMult = ( (((screen.deviceXDPI / screen.systemXDPI) + 0.04) * 100 *10 - 150).toFixed() ); //100%
							scale = App.setScale((screen.deviceXDPI / screen.systemXDPI) +0.04); //100
							App.setInitSizeArea(scaleMult, 400);// 100
						break;
						case 0.75:
							scale = App.setScale(1.3);
							App.setInitSizeArea(1000, 700);
						break;
						case 0.5:
							scale = App.setScale(1.8);
							App.setInitSizeArea(1500, 700);
						break; 
						// default:
							// scale = App.setScale(1.8);
							// App.setInitSizeArea(1500, 700);
						// break; 
					}  
					// scale = App.setScale(1.8);
					// App.setInitSizeArea(1500, 700);
				}else if($.browser.safari){
					scale = App.setScale(1.3);
					App.setInitSizeArea(1050, 500);
				}else if(nameBrowDev == "mobile"){
					scale = App.setScale(0.7);
					App.setInitSizeArea(1050, 500);
				}else{
					scale = "scale(0.13)";
				}
				App.pageName = "A5";
			}
			
			//Add style scale to root container 
			App.setScaleToRoot(scale);
		},
		
		//Load Object From Server
		loadCanvas: function(){ 
			var url = App.baseUrl+"CommHub/get_file_data";
			var allData = {"file_id": App.fileId}
			
			var request = $.ajax({ //get data awal
				url: url,
				type: "POST",
				data: allData,
			});
			request.done(function(msg) {
				var jsonObject = JSON.parse(msg); 
				var contentObject = JSON.parse(jsonObject.content);
				App.lastUpdateTime=jsonObject.last_update;
				var objectArray=[];
				
				var truncFileName=filename;
				if(truncFileName.length > 17)
				{
					truncFileName=truncFileName.substring(0,17);
					truncFileName+="...";
				}
				
				$('.file_title').text(truncFileName+' 1'+'/'+contentObject.pages.length);
				$('.file_title').attr('title',filename+' 1'+'/'+contentObject.pages.length);
				
				App.pageCount = contentObject.pages.length; // Size of Pages
				
				var currPage = App.paramUrl.page_id - 1;	// Current Page Select
				
				for(var pageIndex=0;pageIndex<contentObject.pages.length;pageIndex++)
				{	
					/*
						check out page. The page must be the same as the current page
					*/
					if(pageIndex == currPage){
						
						// Inital Width and Height Root Container
						$('#rootContainer').width(contentObject.pages[pageIndex].width);
						$('#rootContainer').height(contentObject.pages[pageIndex].height);
						
						//Set init page preview
						App.setInitObjectPreview();
						
						// Load All data object append to root container
						for(var objectIndex=0;objectIndex<contentObject.pages[pageIndex].drawing_objects.length;objectIndex++)
						{
							if((contentObject.pages[pageIndex].drawing_objects[objectIndex]).type=="image")
								App.loadDrawingObject(contentObject.pages[pageIndex].drawing_objects[objectIndex]);
							if((contentObject.pages[pageIndex].drawing_objects[objectIndex]).type=="attach")
								App.loadDrawingObject(contentObject.pages[pageIndex].drawing_objects[objectIndex]);
							if((contentObject.pages[pageIndex].drawing_objects[objectIndex]).type=="text" || 
								(contentObject.pages[pageIndex].drawing_objects[objectIndex]).type=="buble"|| 
								(contentObject.pages[pageIndex].drawing_objects[objectIndex]).type=="sticky-text")
								App.loadTextObject(contentObject.pages[pageIndex].drawing_objects[objectIndex]);
							if((contentObject.pages[pageIndex].drawing_objects[objectIndex]).type=="chart")
								App.loadChartObject(contentObject.pages[pageIndex].drawing_objects[objectIndex]);
							if((contentObject.pages[pageIndex].drawing_objects[objectIndex]).type=="table")
								App.loadTableObject(contentObject.pages[pageIndex].drawing_objects[objectIndex]);
						}
					}	  
					
				}
				$("#overlay").hide(); 
									
			});
			request.fail(function(jqXHR, textStatus) {
			});
			request.always(function(){
			});
		},
		
		//Load Text
		loadTextObject:function(data){
			
			var style = "";
			var color = "";
			console.log(data);
			if(data.object_type == "buble"){
				if(data.kind){
					if(data.kind == "bubble1"){
						style = 'class="triangle-border"';
					}else if(data.kind == "bubble2"){
						style = 'class="triangle-border right"';
					}else if(data.kind == "bubble3"){
						style = 'class="triangle-border top"';
					}else if(data.kind == "bubble4"){
						style = 'class="triangle-border left"';
					}else if(data.kind == "bubble5"){
						style = 'class="triangle-border right"';
					}else{
						style = 'class="triangle-border"';
					}
				}else{
					style = 'class="triangle-border"';
				}
			}else if(data.object_type == "sticky-text"){
				style = 'class="sticky taped"';
				color = '#F4F39E';
				if(data.kind){
					if(data.kind == "sticky2"){
						color = '#d6f0fa';
					}else if(data.kind == "sticky3"){
						color = '#f5d1f5';
					}else if(data.kind == "sticky4"){
						color = '#cffdc9';
					}else if(data.kind == "sticky5"){
						color = '#d5cdfe';
					}
				}
			}
			var newTextObject =  $('<div ' + style + '></div>')
									.attr("id",data.id)
									.attr("object_type",data.object_type)
									.addClass("nic-edit-element").appendTo($('#rootContainer'))
									.css("overflow","visible")
									.css("z-index","18")
									.attr("kind",data.kind);
			if(data.object_type == "sticky-text")
			{
				newTextObject.css("background-color",color);
			}
			
			App.Util.setBasicDimension(newTextObject,data.posx,data.posy,data.width,data.height);
			
			newTextObject.html("<div id='text_content_"+data.id+"' style='overflow:hidden;width:100%;height:100%;'>" + data.content + "</div>");
			$("#"+data.id).css("position", "");
		},
		
		// Load Sticky
		loadStickyTextObject:function(data){
			var newStickyTextObject =  $('<div></div>')
									.attr("id",data.id)
									.attr("object_type",data.object_type)
									.addClass("nic-sticky-edit-element").appendTo($('#rootContainer'))
									.css("overflow","visible")
									.css("background",data.background);
			App.Util.setBasicDimension(newStickyTextObject,data.posx,data.posy,data.width,data.height);
			
			newStickyTextObject.html("<div id='text_content_"+data.id+"' style='overflow:hidden;width:100%;height:100%;'>" + data.content + "</div>");
			$("#"+data.id).css("position", "");
			newStickyTextObject.on('dblclick',function() {
				App.richText.enterEditMode($(this).attr('id'));
			}); 
		},
		
		// Load image
		loadDrawingObject : function(data){  
			var newImgContainer = $('<div></div>')
			.attr({'id':data.id,'class':'image', 'type':data.type, 'object_type':data.type, 'created_by':data.created_by, 'created_date':data.created_date})
			.css("position","absolute")
			.css("overflow","visible")
			.appendTo($('#rootContainer'));
			App.Util.setBasicDimension(newImgContainer,data.posx,data.posy,data.width,data.height);
		
			var newImgComponent = $('<img></img>')
			.attr({ 'src': App.baseUrl+data.image_url,'id':"img"+data.id})
			.appendTo(newImgContainer); 
			
		},
		
		// Load Table
		loadTableObject:function(data){
			var newTableContainer = $('<div></div>')
			.attr({'id':data.id,'class':'table','type':data.type, 'object_type':data.object_type})
			.css("overflow","visible")
			.css("cursor", 'default')
			.css("border", '1px solid rgb(160, 160, 164)')
			.css("position","absolute")  
			.appendTo($('#rootContainer'));
			
			App.Util.setBasicDimension(newTableContainer,data.posx,data.posy,data.width,data.height);
		 
			var tableConteiner = $('<table></table>')
			.attr({ id: "tbl_"+data.id, border:"2px", width:"100%", height:"100%"})
			.html(data.content_table)
			.css('border',data.border_style)
			.appendTo(newTableContainer);
			
			App.widthMinTable = 15*data.row_table;
			App.heightMinTable = 15*data.col_table; 
		},
		
		// Load Chart
		loadChartObject : function(data){
		
			var newChartContainer = $('<div></div>')
			.attr({'id':data.id,'class':'image','type':data.type, 'object_type':data.object_type, 'chart-data':data.data_chart})
			.css("position","absolute")
			.css("overflow","visible")
			.appendTo($('#rootContainer'));
			App.Util.setBasicDimension(newChartContainer,data.posx,data.posy,data.width,data.height);
			
			var newChartImgContainer = $('<img></img>')
			.attr({ 'src': App.baseUrl+data.image_url,'id':"img"+data.id})
			.appendTo(newChartContainer); 

		},
		  
		  
		htmlToImage:function(currPageId){ 
			html2canvas(document.getElementById('rootContainer'), {
				onrendered: function(canvas) {
					var dataImg = Canvas2Image.convertToPNG(canvas, 80, 60);
					var dataURL = dataImg.src;
					var newImagePath = "documents/"+App.fileId+"/thumb-"+currPageId+".png";
					
					var url = App.baseUrl+"CommHub/add_thumb_canvas";
					var allData = {"file_id": App.fileId,
									"page_id": currPageId,
									"filepath" : newImagePath,
									"image_data": dataURL
								};
					var request = $.ajax({ //get data awal
									url: url,
									type: "POST",
									data: allData,
								});
					
					request.done(function(msg) { 
						var existingObject=false;	//check if it's an existing object
							$('.layerboxContainer').children().each(function(){
								if($(this).attr('id') == "page_"+currPageId)
								{
									existingObject=$(this);
								}
							});
							if(existingObject)
							{ 
								$("#page"+currPageId).attr('src',(App.baseUrl+newImagePath+"?dum="+(new Date).getTime())); 
							}
					});
					request.fail(function(jqXHR, textStatus) { 
					});
					request.always(function(){
					});
				}
			});
		},
		
		// To detect an browser
		setBrowserDetect:function(){
			if(navigator.userAgent.match(/Android/i)
					|| navigator.userAgent.match(/webOS/i)
					|| navigator.userAgent.match(/iPhone/i)
					|| navigator.userAgent.match(/iPad/i)
					|| navigator.userAgent.match(/iPod/i)
					|| navigator.userAgent.match(/BlackBerry/i)
					|| navigator.userAgent.match(/Touch/i)
					|| navigator.userAgent.match(/Windows Phone/i)){						// If device is mobile
					
				return "mobile";
			}else if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ // MSIE x.x; 
				return "IE";
			}
			else if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ // Firefox/x.x or Firefox x.x (ignoring remaining digits); 
				return "FireFox";
			}
			else if (/Opera[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ // Opera/x.x or Opera x.x (ignoring remaining decimal places); 
				return "Opera";
			}
			else if (/Chrome[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ //  Chrome/x.x or Chrome x.x (ignoring remaining decimal places); 
				return "Chrome";
			} 
			else if (/Safari[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ //  Safari/x.x or Safari x.x (ignoring remaining decimal places); 
				return "Safari";
			}
		},
		
		/*
			This is when the module the "zoom plus" button is clicked.
			Zoom plus is used to enlarge root container
		*/
		zoomPlus:function(){ 
			  
			var nameBrowser = App.setBrowserDetect();
			   
			var tempWindowHeightNew = window.innerHeight;
			var tempWindowWidthNew = window.innerWidth;  
			  
			var subStrWidth = $('#areaPreview').css('width');
			var toRemoveWdt = 'px';
			var newWidthPlus = parseInt(subStrWidth.replace(toRemoveWdt, ''));
			
			var subStrHgh = $('#areaPreview').css('height');
			var toRemoveHgh = 'px';
			var newHeightPlus = parseInt(subStrHgh.replace(toRemoveHgh, '')); 
			 
			var maxPlus = -1;			// Max. enlarge zoom
			
			//Set value for enlarge zoom when the "zoom plus" button is clicked
			if(nameBrowser == "FireFox"){ 
				if(App.pageName == "A1"){
					newWidthPlus = newWidthPlus + 150;
					newHeightPlus = newHeightPlus + 80;
				}else if(App.pageName == "A2" ||  App.pageName == "A3"){
					newWidthPlus = newWidthPlus + 120;
					newHeightPlus = newHeightPlus +80;
				}else if(App.pageName == "A4" || App.pageName == "A5"){
					newWidthPlus = newWidthPlus + 100; 
					newHeightPlus = newHeightPlus + 60;
				}
				maxPlus = 720;
			}else if(nameBrowser == "IE"){
				if(App.pageName == "A1"){
					newWidthPlus = newWidthPlus + 150;
					newHeightPlus = newHeightPlus + 50;
					switch(screen.deviceXDPI / screen.systemXDPI){
						case 4:
							maxPlus = 80;
						break;
						case 2:
							maxPlus = 250;
						break;
						case 1.5:
							maxPlus = 250;
						break;
						case 1.25:
							maxPlus = 450;
						break;
						case 1:
							maxPlus = 450;
						break;
						case 0.75:
							maxPlus = 650	;
						break;
						default:
							maxPlus = 850;
						break;
					}		
					// maxPlus = 450;
				}else if(App.pageName == "A2" ){
					newWidthPlus = newWidthPlus + 140;
					newHeightPlus = newHeightPlus + 60;
					switch(screen.deviceXDPI / screen.systemXDPI){
						case 4:
							maxPlus = 150;
						break;
						case 2:
							maxPlus = 230;
						break;
						case 1.5:
							maxPlus = 230;
						break;
						case 1.25:
							maxPlus = 420;
						break;
						case 1:
							maxPlus = 420;
						break;
						default:
							maxPlus = 720;
						break;
					}
					// maxPlus = 720;
				}else if(App.pageName == "A3" ){
					newWidthPlus = newWidthPlus + 100; 
					newHeightPlus = newHeightPlus + 40;
					switch(screen.deviceXDPI / screen.systemXDPI){
						case 4:
							maxPlus = 150;
						break;
						case 2:
							maxPlus = 230;
						break;
						case 1.5:
							maxPlus = 230;
						break;
						case 1.25:
							maxPlus = 420;
						break;
						case 1:
							maxPlus = 420;
						break;
						default:
							maxPlus = 720;
						break;
					}
					// maxPlus = 720;
				}else if(App.pageName == "A4"){
					newWidthPlus = newWidthPlus + 100; 
					newHeightPlus = newHeightPlus + 40;
					switch(screen.deviceXDPI / screen.systemXDPI){
						case 4:
							maxPlus = 150;
						break;
						case 2:
							maxPlus = 150;
						break;
						case 1.5:
							maxPlus = 230;
						break;
						case 1.25:
							maxPlus = 420;
						break;
						case 1:
							maxPlus = 420;
						break;
						default:
							maxPlus = 720;
						break;
					}
					// maxPlus = 720;
				}else if(App.pageName == "A5"){
					newWidthPlus = newWidthPlus + 100; 
					newHeightPlus = newHeightPlus + 40;
					switch(screen.deviceXDPI / screen.systemXDPI){
						case 4:
							maxPlus = 40;
						break;
						case 2:
							maxPlus = 230;
						break;
						case 1.5:
							maxPlus = 230;
						break;
						case 1.25:
							maxPlus = 420;
						break;
						case 1:
							maxPlus = 420;
						break;
						default:
							maxPlus = 720;
						break;
					}
					// maxPlus = 720;
				}
				// maxPlus = 450; 
			}else if(nameBrowser == "Chrome"){ 
				if(App.pageName == "A1"){
					newWidthPlus = newWidthPlus + 150;
					newHeightPlus = newHeightPlus + 50;
					maxPlus = 750;
				}else if(App.pageName == "A2"){
					newWidthPlus = newWidthPlus + 130;
					newHeightPlus = newHeightPlus + 40;
					maxPlus = 720;
				}else if(App.pageName == "A3"){
					newWidthPlus = newWidthPlus + 130;
					newHeightPlus = newHeightPlus + 40;
					maxPlus = 720;
				}else if(App.pageName == "A4"){
					newWidthPlus = newWidthPlus + 100; 
					newHeightPlus = newHeightPlus + 40;
					maxPlus = 720;
				}else if(App.pageName == "A5"){
					newWidthPlus = newWidthPlus + 100; 
					newHeightPlus = newHeightPlus + 40;
					maxPlus = 720;
				}
				// maxPlus = 480; 
			}
			else if(nameBrowser == "Safari"){ 
				if(App.pageName == "A1"){
					newWidthPlus = newWidthPlus + 150;
					newHeightPlus = newHeightPlus + 50;
					maxPlus = 550;
				}else if(App.pageName == "A2" ||  App.pageName == "A3"){
					newWidthPlus = newWidthPlus + 120;
					newHeightPlus = newHeightPlus + 40;
					maxPlus = 520;
				}else if(App.pageName == "A4" ){
					newWidthPlus = newWidthPlus + 100; 
					newHeightPlus = newHeightPlus + 40;
					maxPlus = 520;
				}else if(App.pageName == "A5"){
					newWidthPlus = newWidthPlus + 100; 
					newHeightPlus = newHeightPlus + 40;
					maxPlus = 520;
				}
				// maxPlus = 550;
			}
			else if(nameBrowser == "mobile"){    
				if(App.pageName == "A1"){
					newWidthPlus = newWidthPlus + 130;
					newHeightPlus = newHeightPlus + 50;
					maxPlus = 440;
				}else if(App.pageName == "A2"  ){
					newWidthPlus = newWidthPlus + 120;
					newHeightPlus = newHeightPlus +50;
					maxPlus = 520;
				}else if(App.pageName == "A3"  ){
					newWidthPlus = newWidthPlus + 110; 
					newHeightPlus = newHeightPlus + 45;
					maxPlus = 430;
				}else if(App.pageName == "A4" || App.pageName == "A5"){
					newWidthPlus = newWidthPlus + 110; 
					newHeightPlus = newHeightPlus + 45;
					maxPlus = 430;
				}
				// maxPlus = 440;
			} 		
				
			var newWidthPlusInt = parseInt(newWidthPlus);
			var newHeightPlusInt = parseInt(newHeightPlus);
			
			// Check value with max enlarge zoom
			if(parseInt(newHeightPlusInt) < maxPlus){
				$('#areaPreview').css('width', parseInt(newWidthPlusInt) );
				$('#areaPreview').css('height', parseInt(newHeightPlusInt));
			}
			
			var matrix = $("#rootContainer").css("transform")||
			$("#rootContainer").css("-webkit-transform")||
			$("#rootContainer").css("-moz-transform")||
			$("#rootContainer").css("-ms-transform")||
			$("#rootContainer").css("-o-transform"); 
			
			// Set value scale (count scale) 
			var plusValues = 0;
			var checkCom = matrix.substr(0, 5);  
			
			if(typeof matrix == "string" && checkCom == "scale"){
				var myString = matrix.substr(matrix.indexOf("(") + 1); 
				var myString2 = myString.substr(0,myString.length - 1); 
				plusValues = parseFloat(myString2)  + 0.1;   
			}else{
				var values = matrix.split('(')[1].split(')')[0].split(',');    
				if(nameBrowser == "FireFox" || nameBrowser == "Chrome" || nameBrowser == "Safari" || nameBrowser == "mobile" || nameBrowser == "IE"){
					plusValues = parseFloat(values[3]) + 0.1;  
				}  
			}
			
			var scaleStr = 'scale(' + plusValues + ')'; 
			
			//assign value to root container
			if(parseInt(newHeightPlusInt) < maxPlus){
				$("#rootContainer").css("transform",scaleStr);
				$("#rootContainer").css("-webkit-transform",scaleStr);
				$("#rootContainer").css("-moz-transform",scaleStr);
				$("#rootContainer").css("-ms-transform",scaleStr);
				$("#rootContainer").css("-o-transform",scaleStr);
			}
		},
		
		/*
			This is when the module the "zoom small" button is clicked.
			Zoom small is used to small root container
		*/
		zoomSmall:function(){ 
			//Set detect browser
			var nameBrowser = App.setBrowserDetect();  
			
			// Check to canvas no smaller
			if(window.innerHeight > 124 && window.innerHeight > 224){ 
				var matrix = $("#rootContainer").css("transform")||
				$("#rootContainer").css("-webkit-transform")||
				$("#rootContainer").css("-moz-transform")||
				$("#rootContainer").css("-ms-transform")||
				$("#rootContainer").css("-o-transform"); 
				
				// get value scale from root container
				var valuesScale = "0";
				var checkCom = matrix.substr(0, 5); 
				if(typeof matrix == "string" && checkCom == "scale"){
					var myString = matrix.substr(matrix.indexOf("(") + 1); 
					var myString2 = myString.substr(0,myString.length - 1);  
					valuesScale = myString2;
				}else{
					var values = matrix.split('(')[1].split(')')[0].split(','); 
					valuesScale = values[3];
				} 
					
				var execResize = 0;
						 
				var subStrWidth = $('#areaPreview').css('width');
				var toRemoveWdt = 'px';
				var newWidthMin = parseInt(subStrWidth.replace(toRemoveWdt, ''));
				
				var subStrHgh = $('#areaPreview').css('height');
				var toRemoveHgh = 'px';
				var newHeightMin = parseInt(subStrHgh.replace(toRemoveHgh, ''));
				

				// This is set value for resize the area preview
				var maxMin = 0;
				if(nameBrowser == "FireFox"){ 
					if(App.pageName == "A1"){
						newWidthMin = newWidthMin - 150; 
						newHeightMin = newHeightMin - 80;
					}else if(App.pageName == "A2" ||  App.pageName == "A3"){
						newWidthMin = newWidthMin - 120; 
						newHeightMin = newHeightMin - 80;
					}else if(App.pageName == "A4" || App.pageName == "A5"){
						newWidthMin = newWidthMin - 100; 
						newHeightMin = newHeightMin - 60;
					}
					maxMin = 139;
				}else if(nameBrowser == "IE"){
					if(App.pageName == "A1"){
						newWidthMin = newWidthMin - 150; 
						newHeightMin = newHeightMin - 50;
						// maxMin = 230;
						switch(screen.deviceXDPI / screen.systemXDPI){
							case 4:
								maxMin = 10;
							break;
							case 2:
								maxMin = 10;
							break;
							case 1.5:
								maxMin = -40;
							break;
							case 1.25:
								maxMin = 130;
							break;
							case 1:
								maxMin = 10;
							break;
							case 0.75:
								maxMin = 230;
							break;
							case 0.5:
								maxMin = 401;
							break;
						}
					}else if(App.pageName == "A2"  ){
						newWidthMin = newWidthMin - 140; 
						newHeightMin = newHeightMin - 60;
						// maxMin = 320;
						switch(screen.deviceXDPI / screen.systemXDPI){
							case 4:
								maxMin = -400;
							break;
							case 2:
								maxMin = 10;
							break;
							case 1.5:
								maxMin = -40;
							break;
							case 1.25:
								maxMin = 130;
							break;
							case 1:
								maxMin = 30;
							break;
							case 0.75:
								maxMin = 320;
							break;
							case 0.5:
								maxMin = 320;
							break;
						}
					}else if(App.pageName == "A3" ){
						newWidthMin = newWidthMin - 100; 
						newHeightMin = newHeightMin - 40;
						// maxMin = 320;
						switch(screen.deviceXDPI / screen.systemXDPI){
							case 4:
								maxMin = -400;
							break;
							case 2:
								maxMin = 10;
							break;
							case 1.5:
								maxMin = -40;
							break;
							case 1.25:
								maxMin = 130;
							break;
							case 1:
								maxMin = 80;
							break;
							case 0.75:
								maxMin = 320;
							break;
							case 0.5:
								maxMin = 320;
							break;
						}
					}else if(App.pageName == "A4" || App.pageName == "A5"){
						newWidthMin = newWidthMin - 100; 
						newHeightMin = newHeightMin - 40;
						// maxMin = 320;
						switch(screen.deviceXDPI / screen.systemXDPI){
							case 4:
								maxMin = -400;
							break;
							case 2:
								maxMin = 10;
							break;
							case 1.5:
								maxMin = -40;
							break;
							case 1.25:
								maxMin = 130;
							break;
							case 1:
								maxMin = 80;
							break;
							case 0.75:
								maxMin = 320;
							break;
							case 0.5:
								maxMin = 320;
							break;
						}
					}
					// maxMin = 320;
				}else if(nameBrowser == "Chrome"){ 
					if(App.pageName == "A1"){
						newWidthMin = newWidthMin - 150; 
						newHeightMin = newHeightMin - 50;  
					}else if(App.pageName == "A2" ||  App.pageName == "A3"){
						newWidthMin = newWidthMin - 130; 
						newHeightMin = newHeightMin - 40;  
					}else if(App.pageName == "A4" || App.pageName == "A5"){
						newWidthMin = newWidthMin - 100; 
						newHeightMin = newHeightMin - 40;  
					}
					maxMin = 320;
				}else if(nameBrowser == "Safari"){ 
					if(App.pageName == "A1"){
						newWidthMin = newWidthMin - 150; 
						newHeightMin = newHeightMin - 50;
					}else if(App.pageName == "A2" ||  App.pageName == "A3"){
						newWidthMin = newWidthMin - 120; 
						newHeightMin = newHeightMin - 40;
					}else if(App.pageName == "A4"){
						newWidthMin = newWidthMin - 100; 
						newHeightMin = newHeightMin - 40;
					}else if(App.pageName == "A5"){
						newWidthMin = newWidthMin - 100; 
						newHeightMin = newHeightMin - 40;
					}
					maxMin = 320;
				}else if(nameBrowser == "mobile"){    
					if(App.pageName == "A1"){
						newWidthMin = newWidthMin - 130; 
						newHeightMin = newHeightMin - 50;
						maxMin = 139;
					}else if(App.pageName == "A2" ){
						newWidthMin = newWidthMin - 120; 
						newHeightMin = newHeightMin - 50;
						maxMin = 210;
					}else if(App.pageName == "A3"  ){
						newWidthMin = newWidthMin - 110; 
						newHeightMin = newHeightMin - 45;
						maxMin = 210;
					}else if(App.pageName == "A4" || App.pageName == "A5"){
						newWidthMin = newWidthMin - 110; 
						newHeightMin = newHeightMin - 45;
						maxMin = 210;
					}
					// maxMin = 139;
				} 
				
				var newWidthMinInt = parseInt(newWidthMin);
				var newHeightMinInt = parseInt(newHeightMin);  
				
				// resize area preview
				// if(parseInt(newHeightMin)> maksimal minimum){
				// alert(newHeightMin);
				// alert(maxMin);
				if(parseInt(newHeightMin)>maxMin){
					$('#areaPreview').css('width', parseInt(newWidthMinInt) );
					$('#areaPreview').css('height', parseInt(newHeightMinInt)); 
				}
				
				//set a new scale value
				var minValues = 0;
				if(nameBrowser == "FireFox" || nameBrowser == "Safari" || nameBrowser == "mobile"){
					minValues = parseFloat(valuesScale) - 0.1; 
				}else if(nameBrowser == "IE" ){
					minValues = parseFloat(valuesScale) - 0.1; 
				}else if(nameBrowser == "Chrome" ){
					minValues = parseFloat(valuesScale) - 0.1; 
				}
				
				// set value scale to root container
				var scaleStr = 'scale(' + minValues + ')'; 
				if(parseInt(newHeightMin)>maxMin){
					$("#rootContainer").css("transform",scaleStr);
					$("#rootContainer").css("-webkit-transform",scaleStr);
					$("#rootContainer").css("-moz-transform",scaleStr);
					$("#rootContainer").css("-ms-transform",scaleStr);
					$("#rootContainer").css("-o-transform",scaleStr);
				} 
			}	
			
			
		}, 
		  
	}
});